<template>
	<view class="list-card-container">
		<!-- 基础卡片 -->
		<view class="list-card" v-if="item.mode === 'base'" @click="goArticleDetail(item)">
			<!-- 图片 -->
			<view class="list-card-img">
				<image :src="item.cover[0] ? item.cover[0]:'/static/img/logo.jpeg'" mode="aspectFill"></image>
			</view>
			<!-- 介绍 -->
			<view class="list-card-content">
				<view class="list-card-content-title">
					<text>
						{{item.title}}
					</text>
					<Follow class="article-list-follow" :articleId="item._id"></Follow>
				</view>
				<view class="list-card-desc">
					<view class="article-type">
						{{item.classify}}
					</view>
					<view class="browse-numbers">
						{{item.browse_count}}浏览
					</view>
				</view>
			</view>
		</view>
		<!-- 多图卡片 -->
		<view class="list-card mode-column" v-if="item.mode === 'column'" @click="goArticleDetail(item)">
			<view class="list-card-top">
				<text>
					{{item.title}}
				</text>
				<Follow class="article-list-follow" :articleId="item._id"></Follow>
			</view>
			<view class="list-card-middle">
				<view class="middle-image-container" v-for="(img,i) in item.cover.slice(0,3)" :key="i">
					<image :src="img" mode="aspectFill"></image>
				</view>
			</view>
			<view class="list-card-desc list-card-buttom">
				<view class="article-type">
					{{item.classify}}
				</view>
				<view class="browse-numbers">
					{{item.browse_count}}浏览
				</view>
			</view>
		</view>
		<!-- 大图卡片 -->
		<view class="list-card mode-image" v-if="item.mode === 'image'" @click="goArticleDetail(item)">
			<view class=" list-card-top">
				<view class="middle-image-container ">
					<image :src="item.cover[0]" mode="aspectFill"></image>
				</view>
			</view>
			<view class="list-card-middle">
				<text>
					{{item.title}}
				</text>
				<Follow class="article-list-follow" :articleId="item._id"></Follow>
			</view>

			<view class="list-card-desc list-card-buttom">
				<view class="article-type">
					{{item.classify}}
				</view>
				<view class="browse-numbers">
					{{item.browse_count}}浏览
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ListCard",
		props: {
			item: Object
		},
		data() {
			return {

			};
		},
		methods: {
			goArticleDetail(item) {
				this.$emit("saveSearchHistor")
				this.$emit("goArticleDetail", item)
			}
		},
	}
</script>

<style scoped lang="scss">
	@import './css/ListCard.scss'
</style>
